<template>
  <div class="shop" ref="shopscorll">
    <div class="shopnav">
      <div class="address">
        <router-link to="/changecity">
            <i class="iconfont">&#xe604;</i>{{city}}
        </router-link>
      </div>
      <input class="seach" type="text" placeholder="输入你想购买商品名称" @click="gotofind()">
      <div class="buycar">
        <router-link to="/cart">
           <i class="iconfont">&#xe621;</i>
        </router-link>
      </div>
    </div>
    <div class="typeList">
      <ul>
        <li>
          <router-link to="/shoptype">
            <p class="use_img">
              <i class="iconfont">&#xe626;</i>
            </p>
            <p>乳霜</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe61e;</i>
            </p>
            <p>洁面</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe6d9;</i>
            </p>
            <p>眼部</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe600;</i>
            </p>
            <p>原液精华</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe60c;</i>
            </p>
            <p>打底防护</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe643;</i>
            </p>
            <p>面膜</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe600;</i>
            </p>
            <p>化妆水</p>
          </router-link>
        </li>
        <li>
          <router-link to="javascript:void(0)">
            <p class="use_img">
              <i class="iconfont">&#xe640;</i>
            </p>
            <p>冻干组合</p>
          </router-link>
        </li>
      </ul>
    </div>
	<Main></Main>

  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Main from "@/components/maincontent"
export default {
  data () {
    return {
        city:localStorage.getItem("city")
    }
  },
  mounted(){
  },
  components:{
	  Main
  },
  methods:{

	  backTop() {
          //  console.log( this.scroll)
        //  this.scroll.scrollTo(0,0,1000)
       },
    gotofind(){
      this.$router.push("/findpage")
      }
  }
}
</script>

<style lang="less" scoped>

.shop{
	height: 100%;
}
.time{
  width: 1.05rem;
  height: .39rem;
  background: #d9d9d9;
  color: #fff;
  font-size: .12rem;
  box-sizing: border-box;
  border-radius: .07rem;
  margin-top:.22rem;  
}
.count{
   margin-top: 1.6rem;
   display: flex;
   flex-direction: row;
}
.money{
  color: #ff340e;
  flex: 1;
}
.shopList{
  width: 100%;
  box-sizing: border-box;
  // padding: .3rem;
  dl{
    display: flex;
    padding-top: .5rem;
    padding: .3rem;
    dt{
      width: 3.37rem;
      height: 2.97rem;
      margin-right: .29rem;
      img{
        width: 100%;
         height: 2.97rem;
         border-radius: .15rem;
      }
    }
    dd{
      flex: 1;
    }
  }
}
.typeList {
	a{
		color: #6d6d6d;
	}
  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #fff;
    padding-bottom: 0.55rem;
    li {
      width: 25%;
      text-align: center;
	  margin-top: 0.6rem;
	  display: flex;
	  flex-direction: column;
	  align-items: center;	
      .use_img {
        width: 1.5rem;
        height: 1.5rem;
		background: #f7f7f7;
		border-radius: 50%;
		line-height: 1.5rem;
		margin-bottom: .34rem;
		i{
			font-size: .7rem
		}
      }
    }
  }
}
.shopnav {
  width: 100%;
  height: 1.56rem;
  display: flex;
  flex-direction: row;
  background: #ffe55c;
  align-items: center;
  input::-webkit-input-placeholde {
    color: #e0d38d;
  }
  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #e0d38d;
  }
  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #e0d38d;
  }
  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #e0d38d;
  }
  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #e0d38d;
  }
  .address {
    width: 1.86rem;
    height: 0.99rem;
    border-radius: 0.41rem;
    background: #fff1aa;
    line-height: 0.99rem;
    text-align: center;
    margin-right: 0.12rem;
    margin-left: 0.12rem;
    color: #e0d38d;
    a{
		color: #6d6d6d;
    }
  }
  .seach {
    flex: 1;
    height: 0.99rem;
    border: none;
    outline: none;
    border-radius: 0.41rem;
    background: #fff1aa;
    text-indent: 2em;
  }
  .buycar {
    width: 0.99rem;
    height: 0.99rem;
    border-radius: 50%;
    text-align: center;
    line-height: 0.99rem;
    background: #fff;
    margin: 0 0.12rem;
    color: #fde561;
  }
}
@font-face {
  font-family: "iconfont"; /* project id 993598 */
  src: url("//at.alicdn.com/t/font_993598_uwoby29puh.eot");
  src: url("//at.alicdn.com/t/font_993598_uwoby29puh.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_993598_uwoby29puh.woff") format("woff"),
    url("//at.alicdn.com/t/font_993598_uwoby29puh.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_993598_uwoby29puh.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
